<template>
  <div id="app">

    <div id="audio_btn" :class="musicPaused ? 'rotate' : ''" @touchstart="pauseMusic">
      <audio ref='audioMusic' id="audio-1"  class="music0" loop>
        <source src="./assets/daguanyuan.mp3">
      </audio>
    </div>
    <agile
      ref="carousel"
      class="my-swipe"
      :nav-buttons="false"
      :initial-slide="initialSlide"
      :center-mode="true"
      :fade="true"
      :infinite="infinite"
      :speed="speed"
      :timing="timing[3]"
      :mobile-first="true"
      :pause-on-hover="false"
      :unagile="unagile"
      @afterChange="afterChange"
      @beforeChange="beforeChange"
    >
      <div class="slide slide1 bg bg1">
        <div v-if="currentSlide == 0" class="btn-wrapper ty-btn">
          <div class="btn right animated zoomIn infinite">
            <img src="./assets/ty-btn.png" alt="">
          </div>
        </div>
      </div>
      <div class="slide slide2 bg bg2  btn-container">
        <div v-if="currentSlide == 1" class="left-for-more">向左滑动查看更多</div>
        <div v-if="currentSlide == 1" class="btn-wrapper">
          <div class="btn"></div>
          <div class="btn first-right right ">
            <img src="./assets/right.png" alt="">
          </div>
        </div>
        <audio v-if="currentSlide == 1" id="audio-1"  class="music1">
          <source src="./assets/chanming1.mp3">
        </audio>
      </div>
      <div class="slide slide3 bg bg3">
        <div v-if="currentSlide == 2" class="btn-wrapper">
          <div class="btn"></div>
          <div class="btn first-right right ">
            <img src="./assets/right.png" alt="">
          </div>
        </div>
      </div>
      <!-- 第一个对话 -->
      <div class="slide slide4 bg bg4">
        <dialog4 v-if="currentSlide === 3" @move-next="moveNext" :dialogCurrent="dialogCurrent"></dialog4>
      </div>
      <!-- 扇子：5-8 -->
      <div class="slide slide5 bg bg5 btn-container">
        <div class="btn-wrapper">
          <div class="btn"></div>
          <div class="btn right"></div>
        </div>
      </div>
      <!-- <div class="slide slide6 bg bg6 btn-container">
        <div class="btn-wrapper">
          <div class="btn left"></div>
          <div class="btn right"></div>
        </div>
      </div>
      <div class="slide slide7 bg bg7 btn-container">
        <div class="btn-wrapper">
          <div class="btn left"></div>
          <div class="btn right"></div>
        </div>
      </div>
      <div class="slide slide8 bg bg8 btn-container">
        <div class="btn-wrapper">
          <div class="btn left"></div>
          <div class="btn"></div>
        </div>
      </div> -->
      <!-- // 扇子和冰箱中间对话 -->
      <div class="slide slide6 slide20 bg bg20">
        <dialog20 v-if="currentSlide === 5" @move-next="moveNext" :dialogCurrent="dialogCurrent"></dialog20>
        <!-- <div v-if="currentSlide == 8" class="btn-wrapper">
          <div class="btn"></div>
          <div class="btn first-right right ">
            <img src="./assets/right.png" alt="">
          </div>
        </div> -->
      </div>
      <!-- 冰箱：9-10 -->
      <!-- <div class="slide slide7 bg bg9 btn-container">
        <div class="btn-wrapper">
          <div class="btn"></div>
          <div class="btn right"></div>
        </div>
      </div> -->
      <div class="slide slide7 bg bg10 btn-container">
        <div class="btn-wrapper">
          <div class="btn left"></div>
          <div class="btn"></div>
        </div>
      </div>
      <!-- 镜头5众女争吵不休：“听我的”，“我的好”，“我的最实用”、“我的最淑女”(已完成) -->
      <div class="slide slide8 bg bg11">
        <div v-if="currentSlide == 7" >
          <audio id="audio-1" class="music7">
            <source src="./assets/audio-1.mp3">
          </audio>
        </div>
        <div v-if="currentSlide == 7" class="btn-wrapper">
          <div class="btn"></div>
          <div class="btn first-right right ">
            <img src="./assets/right.png" alt="">
          </div>
        </div>
      </div>
      <!-- 宝哥哥，看看我准备的避暑“黑科技”吧，夏天跟冰块最配了！ -->
      <div class="slide slide9 bg bg12">
        <dialog12 v-if="currentSlide === 8" @move-next="moveNext" :dialogCurrent="dialogCurrent"></dialog12>

        <!-- <div v-if="currentSlide == 12" class="btn-wrapper">
          <div class="btn"></div>
          <div class="btn first-right right ">
            <img src="./assets/right.png" alt="">
          </div>
        </div> -->
      </div>
      <!-- 出现slogan：大观园（爆冰） -->
      <div class="slide slide10 bg bg13">
        <img v-if="currentSlide === 9" class="bz animated" src="./assets/bz.png">
        <img v-if="currentSlide === 9" class="bx animated zoomIn" src="./assets/bx.png">

        <div v-if="currentSlide == 9" class="btn-wrapper">
          <div class="btn"></div>
          <div class="btn first-right right ">
            <img src="./assets/right.png" alt="">
          </div>
        </div>
      </div>
      <!-- 爽一夏，爆一下。 -->
      <div class="slide slide11 bg bg14 block">
        <div v-if="currentSlide === 10" class="smokelight animated delay-1s zoomInUp">
          <img src="./assets/smokelight@2x.png">
        </div>
        <div v-if="currentSlide == 14" class="btn-wrapper">
          <div class="btn"></div>
          <div class="btn first-right right ">
            <img src="./assets/right.png" alt="">
          </div>
        </div>
      </div>
      <!-- 镜头8:众人陶醉，纷纷表示：“好清凉！”“好冰爽”“好high哟”“感觉人生到达了人生巅峰”(已完成) -->
      <div class="slide slide12 bg bg21">
        <dialog21 v-if="currentSlide === 11" @move-next="moveNext" :dialogCurrent="dialogCurrent"></dialog21>
        <div v-if="currentSlide == 11" >
          <audio id="audio-1" class="music11">
            <source src="./assets/audio-2.mp3">
          </audio>
        </div>
      </div>
      <!-- 镜头9宝黛对话：黛玉：“宝哥哥，你有所不知~外婆跟我说了，最近咱们大观园有大动作！”(已完成)“7月1日-9月31日，期间首次扫码，可以获得与商品价值等价的乾币！”
      -->
      <div class="slide slide13 bg bg15">
        <dialog23 v-if="currentSlide === 12" @move-next="moveNext" :dialogCurrent="dialogCurrent"></dialog23>
      </div>
      <!-- 镜头10关注引导 -->
      <div class="slide slide14 bg bg16">
        <dialog22 v-if="currentSlide === 13" @move-next="moveNext" :dialogCurrent="dialogCurrent"></dialog22>
      </div>
      <!-- 镜头12：众人齐声：“等不及了！快来大观园，(ヽ `д′) 体验爆一夏，爽一夏！” -->
      <div class="slide slide15 bg bg17 block">
        <div v-if="currentSlide === 14" class="bingshan animated delay-1s fadeInUp">
          <img src="./assets/smokelight@2x.png">
        </div>
        <div v-if="currentSlide === 14" class="bingshan animated delay-3s fadeInUp">
          <img src="./assets/baoyixia.png">
        </div>
        
        <!-- <div v-if="currentSlide == 18" class="btn-wrapper">
          <div class="btn"></div>
          <div class="btn first-right right animated delay-1s fadeInLeft infinite">
            <img src="./assets/right.png" alt="">
          </div>
        </div> -->

        <div class="content">等不及了！快来大观园，体验爆一下，爽一夏！</div>
      </div>
      <!-- xiexie -->
      <div class="slide slide16 bg bg30">
      </div>
    </agile>
  </div>
</template>

<script>
import dialog4 from "./components/dialog4.vue";
import dialog5 from "./components/dialog5.vue";
import dialog12 from "./components/dialog12.vue";
import dialog20 from "./components/dialog20.vue";
import dialog21 from "./components/dialog21.vue";
import dialog22 from "./components/dialog22.vue";
import dialog23 from "./components/dialog23.vue";
function audioAutoPlay(id, loop) {
  console.log(id)
  var audio = document.querySelector(id),
    play = function() {
      audio.play();
      document.removeEventListener("touchstart", play, false);
    };
  audio.play();
  document.addEventListener(
    "WeixinJSBridgeReady",
    function() {
      play();
    },
    false
  );
  if (loop) {
    audio.addEventListener(
      "ended",
      function() {
        //循环
        audio.load();
        audio.play();
      },
      false
    );
  }
}
export default {
  name: "app",
  components: {
    dialog4,
    dialog12,
    dialog20,
    dialog21,
    dialog22,
    dialog23,
    // dialog5
  },
  data() {
    return {
      timing: ["linear", "ease", "ease-in", "ease-out", "ease-in-out"],
      speed: 1800,
      initialSlide: 0,
      // initialSlide: 3,
      currentSlide: 0,
      dialogCurrent: 0,
      unagile: false,
      bxShow: true,
      infinite: false,
      musicPaused: false
    };
  },
  methods: {
    pauseMusic () {
      console.log(this.musicPaused)
      this.musicPaused = !this.musicPaused
      const music = ".music0"
      var audio = this.$refs.audioMusic
      audio.play()
      console.log(audio)
      if (this.musicPaused) {
        audio.play()
      } else {
        audio.pause()
      }
    },
    moveNext() {
      console.log("moveNext");
      this.$refs.carousel.goToNext();
      this.dialogCurrent = 0;
      this.toggleCarousel(false);
    },
    toggleCarousel(type) {
      function stop(e) {
        e.preventDefault();
        e.stopPropagation();
        return false;
      }
      const dom = document.body.querySelector(".dialog");
      if (type) {
        dom.addEventListener("touchmove", stop);
      } else {
        dom.removeEventListener("touchmove", stop);
      }
    },
    afterChange({ currentSlide }) {
      console.log("afterChange", currentSlide);
      this.currentSlide = currentSlide;
      let that = this
      this.$nextTick(() => {
        // if ([3, 8, 12, 15, 17, 16].includes(currentSlide)) {
        if ([3, 5, 8, 11, 13, 12].includes(currentSlide)) {
          document.body
            .querySelector(".dialog-dom")
            .addEventListener("touchstart", e => {
              e.preventDefault();
              this.dialogCurrent++;
            });
          this.toggleCarousel(true);
        }
        if ([ 1, 7, 11].includes(currentSlide)) {
          // var audio = require("./autoplay.js");
          const music = ".music" + currentSlide
          // console.log('music', music)
          // audio.playSound(music);
          audioAutoPlay(music, currentSlide === 0)
          // this.pauseMusic = true
        }
        if ([0].includes(currentSlide)) {
          var audio = this.$refs.audioMusic
          audio.play()
          this.musicPaused = true
        }
        if ([9].includes(currentSlide)) {
          setTimeout(() => {
            document.querySelector('.bz').classList.add('daiyuFly')
          }, 400);
        }
        if ([15].includes(currentSlide)) {
          document.body.querySelector('.bg30')
            .addEventListener("touchstart", e => {
              e.preventDefault();
              that.$refs.carousel.goTo(0)
            });
          this.toggleCarousel(true);
        }
      });
    },
    beforeChange({ currentSlide, nextSlide }) {
      console.log("beforeChange", currentSlide, nextSlide);
    }

  },
  mounted() {
    this.$nextTick(() => {
      let rightNodeList = document.body.querySelectorAll(".btn.right");
      let r_length = rightNodeList.length;
      let leftNodelist = document.body.querySelectorAll(".btn.left");
      let l_length = leftNodelist.length;
      rightNodeList.forEach(item => {
        item.addEventListener("touchstart", e => {
          console.log(e.target.dataset);
          e.stopPropagation();
          this.$refs.carousel.goToNext();
        });
      });
      leftNodelist.forEach(item => {
        item.addEventListener("touchstart", e => {
          console.log(e.target.dataset);
          e.stopPropagation();
          this.$refs.carousel.goToPrev();
        });
      });
    })  
  }
};
</script>

<style lang="less" scoped>
html,
body {
  width: 100%;
  height: 100%;
}

@font-face {
  font-family: "typeface";
  src: url("./assets/typeface.ttf");
}
#app {
  font-family: "typeface", "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  /* color: #2c3e50; */
  /* margin-top: 60px; */
  width: 100%;
  height: 100%;
  font-size: 16px;
  overflow: hidden;
}
.slide {
  width: 100%;
  height: 100vh;
  // position: relative;
  /* text-align: center; */
}
.slide1 {
  background-color: #0089dc;
  color: #fff;
}

.slide2 {
  background-color: #ffd705;
  color: #000;
}

.slide3 {
  background-color: #ff2d4b;
  color: #fff;
}
#audio_btn {
    z-index: 9999;
    position: fixed;
    top: .2rem;
    left: .2rem;
    width: .3rem;
    height: .3rem;
    background-image: url('./assets/music-icon.svg');
    background-size: contain;
}

.rotate {
    -webkit-animation: rotating 1.2s linear infinite;
    -moz-animation: rotating 1.2s linear infinite;
    -o-animation: rotating 1.2s linear infinite;
    animation: rotating 1.2s linear infinite
}

@-webkit-keyframes rotating {
    from { -webkit-transform: rotate(0) }
    to { -webkit-transform: rotate(360deg) }
}

@keyframes rotating {
    from { transform: rotate(0) }
    to { transform: rotate(360deg) }
}
@-moz-keyframes rotating {
    from { -moz-transform: rotate(0) }
    to { -moz-transform: rotate(360deg) }
}

.bg {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;

  .btn-wrapper {
    position: absolute;
    top: 3.2rem;
    width: 100%;
    height: 0.3rem;
    display: flex;
    justify-content: space-between;
    .btn {
      width: 36%;
      height: 1rem;
      margin: 0 0.2rem;
    }
    .first-right {
      right: 0rem;
      margin-right: .2rem;
    }
  }

  .ty-btn{
    width: 100%;
    height: 1rem;
    justify-content: center;
    margin-top: .9rem;
    .btn{
      width: 25%;
    }
  }
  // height: 100%;
}
// .baoyixia {
//   // transform: scale(1.2);
//   margin-top: -3.2rem;
//   z-index: 4;
// }

.bingshan {
  transform: scale(1.2);
  margin-top: -.5rem;
  z-index: 5;
}
.smokelight {
  transform: scale(1.5);
  margin-top: -.3rem;
  z-index: 5;
}
.block{
  display: block;
  position: relative;
  .btn-wrapper{
    position: absolute;
    top: 50%;
    margin-top: -.2rem;
  }
}

.bg1 {
  background: url("./assets/page-1-bg.jpg") no-repeat;
  background-size: 100% 100%;
}

.bg2 {
  background: url("./assets/page-1-02.png") no-repeat;
  background-size: 100% 100%;
  .left-for-more {
    position: absolute;
    top: 4.4rem;
    right: .5rem;
  }
}

.bg3 {
  background: url("./assets/page-1-03.jpg") no-repeat;
  background-size: 100% 100%;
}

.bg21 {
  background: url("./assets/dialog.jpg") no-repeat;
  background-size: 100% 100%;
}
.bg4,
.bg20,
.bg12{
  background: url("./assets/dialog2.jpg") no-repeat;
  background-size: 100% 100%;
}

.bg5 {
  background: url("./assets/page-1-05.jpg") no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
// .btn-container {
//   display: flex;
//   flex-direction: column;
//   justify-content: center;
//   .btn-wrapper {
//     width: 100%;
//     height: 0.3rem;
//     display: flex;
//     justify-content: space-between;
//     .btn {
//       width: 25%;
//       margin: 0 0.2rem;
//     }
//     .first-right {
//       right: .1rem;
//       margin-right: -.3rem;
//     }
//   }
//   .ty-btn{
//     height: 1rem;
//   }
// }

.bg6 {
  background: url("./assets/page-1-06.jpg") no-repeat;
  background-size: 100% 100%;
}

.bg7 {
  background: url("./assets/page-1-07.jpg") no-repeat;
  background-size: 100% 100%;
}

.bg8 {
  background: url("./assets/page-1-08.png") no-repeat;
  background-size: 100% 100%;
}

.bg9 {
  background: url("./assets/page-1-09.png") no-repeat;
  background-size: 100% 100%;
}

.bg10 {
  background: url("./assets/page-1-10.png") no-repeat;
  background-size: 100% 100%;
}

.bg11 {
  background: url("./assets/page-1-11.jpg") no-repeat;
  background-size: 100% 100%;
}

.bg12 {
  background: url("./assets/12.13bg@2x.jpg") no-repeat;
  background-size: 100% 100%;
}

.bg13 {
  background: url("./assets/page-1-15.jpg") no-repeat;
  background-size: 100% 100%;
  position: relative;
  img.bx {
    z-index: -5;
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    top: 1.1rem;
    left: 0.37rem;
  }
  img.bz {
    width: 1.5rem;
    height: 1.5rem;
    display: none;
    position: absolute;
  }
}

.bg14 {
  background: url("./assets/page-1-16.jpg") no-repeat;
  background-size: 100% 100%;
}

.bg15 {
  background: url("./assets/page-1-17.png") no-repeat;
  background-size: 100% 100%;
}

.bg16 {
  background: url("./assets/14bg@2x.jpg") no-repeat;
  background-size: 100% 100%;
}
.bg30 {
  background: url("./assets/xiexie.png") no-repeat;
  background-size: 100% 100%;
}

.bg17, .bg14 {
  background: url("./assets/16.bg@2x.jpg") no-repeat;
  background-size: 100% 100%;
  position: relative;
  .content {
    position: absolute;
    left: 0;
    bottom: 0;
    text-align: center;
    height: 0.5rem;
    line-height: 0.5rem;
    background: #fff;
    width: 100%;
  }
  .shuang {
    display: flex;
    justify-content: center;
    margin-top: -1rem;
    img {
      width: 70%;
    }
  }
}
.bg17 {
  background: url("./assets/17.bg@2x.jpg") no-repeat;
  background-size: 100% 100%;
  position: relative;
  .content {
    position: absolute;
    left: 0;
    bottom: 0;
    text-align: center;
    height: 0.5rem;
    line-height: 0.5rem;
    background: #fff;
    width: 100%;
  }
  .shuang {
    display: flex;
    justify-content: center;
    margin-top: -1rem;
    img {
      width: 70%;
    }
  }
}

.orange {
  background: #ffd705;
}
</style>
